<!-- 组件 -->
<script lang="ts" setup>
import { ref, reactive, onMounted, watch, type VNode, h } from 'vue'
import TableView from '@/components/TableView.vue'
import {
    NSpace,
    NButton,
    NInput,
    useMessage,
    NScrollbar,
    NSpin,
    NDataTable,
    NPagination,
    type DataTableColumns,
    NModal,
    NTreeSelect,
    NForm,
    NFormItem,
    NTooltip,
    NSelect,
    type SelectOption
} from 'naive-ui'
import { sendRequest } from '@/utils/api'
import FixedAction from '@/components/FixedAction.vue'
import { keysOf } from '@/utils/object'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import router from '@/router'
import { useRoute } from 'vue-router'
import { createH } from '@/components/ButtonShowH/CreateH'
import InfoBatchCollectList from '@/components/CollectProcess/InfoBatchCollectList/index.vue'
import useRouteQuery from '@/hooks/useRouteQuery'
import useFlush from '@/hooks/useFlush'
const props = defineProps({
    data: Array,
    columnsArr: Array,
    disabled: { type: Boolean, default: () => false } //是否可以编辑
})
const emit = defineEmits(['update:data'])
/*columnsArr=[
key:'ME0922',
label:'责任者（730-$b）',
isMust:true//是否必填
]*/
const data: any = ref([])
const columns: any = ref([
    {
        title: '操作',
        key: 'action',
        width: '10rem',
        align: 'center',
        fixed: 'right',
        render: (e: any) => {
            return h(
                NButton,
                {
                    type: 'primary',
                    quaternary: true,
                    color: '#FD4A29',
                    style: {
                        display: e?.statusName == '通过' ? 'none' : 'inline'
                    },
                    onClick: () => deleteFn(e)
                },
                {
                    default: () => '删除'
                }
            )
        }
    }
])
const deleteFn = (e: any) => {
    data.value = data.value.filter((item: any) => e.id == item.id)
    emit('update:data', data.value)
}

const addFn = () => {
    data.value = data.value.concat({ id: data.value.length + 1 })
}
watch(
    () => props.data,
    () => {
        if (props.data) {
            data.value = props.data
            columns.value = props.columnsArr
                ?.map((item: any) => {
                    return {
                        title: () => {
                            if (item.isMust) {
                                return h('div', {}, [
                                    h(
                                        'span',
                                        {
                                            style: {
                                                color: 'red'
                                            }
                                        },
                                        '*'
                                    ),
                                    h('span', null, { default: () => item.label })
                                ])
                            } else {
                                return item.label
                            }
                        },
                        key: item.key,
                        align: 'center',
                        width: '15rem',
                        render: (e: any) => {
                            return props.disabled
                                ? h(
                                    NInput,
                                    {
                                        VModel: e[item.key],
                                        placeholder: '请输入' + item.key,
                                        change: (e: any) => {
                                            data.value[e.target.value - 1][item.key] = e
                                        }
                                    },
                                    {}
                                )
                                : e[item.key]
                        }
                    }
                })
                .concat(columns.value)
        }
    },
    {
        deep: true,
        immediate: true
    }
)
</script>
<template>
    <div class="item">
        <NButton @click="addFn">添加列表</NButton>
        <NDataTable :bordered="false" :columns="columns" :data="data" max-height="300px" min-height="300px" />
    </div>
</template>
<style lang="scss" scoped>
@mixin CommonFont {
    font-size: 15rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #333333;
}
</style>
